<template>
  <div class="content">
    <ul class="leftTab">
      <li v-for="item in goods" :key="item.name">
        <a class="lefA" :href="'#' + item.name">
          {{ item.name }}
        </a>
      </li>
    </ul>
    <ol>
      <li v-for="items in goods" :key="items.name">
        <p class="titles" :id="items.name">{{ items.name }}</p>
        <ul class="rightTab">
          <li v-for="food in items.foods" :key="food.name">
            <img :src="food.image" alt="" />
            <div>
              <p class="smallTitle">{{ food.name }}</p>
              <span class="spCount">月售{{ food.sellCount }}份</span>
              <span class="spRate">好评率{{ food.rating }}%</span><br />
              <div>
                <div>
                  <span class="spPrice">￥{{ food.price }}</span>
                  <span class="spOld">{{ food.oldPrice }}</span>
                </div>
                <btn :item="food" type="0"></btn>
              </div>
            </div>
          </li>
        </ul>
      </li>
    </ol>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import btn from './btn.vue'
export default {
  data() {
    return {}
  },
  components: {
    btn,
  },
  created() {
    this.getGoods()
  },
  computed: {
    ...mapState(['goods', 'carList']),
  },
  methods: {
    ...mapActions(['getGoods']),
    // add(food) {
    //   if (!food.count) {
    //     food.count = 1
    //   } else {
    //     food.count++
    //   }

    //   this.$store.commit('setCarList', {
    //     item: food,
    //   })
    // },
    // reduce(food) {
    //   food.count--
    // },
  },
}
</script>

<style scoped>
.content {
  display: flex;
  height: 405px;
  /* overflow: auto; */
}
::-webkit-scrollbar {
  display: none;
}
.leftTab {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: auto;
}
.leftTab > li:hover {
  background: #fff;
}
.leftTab > li {
  width: 100px;
  height: 54px;
  background: #f3f5f7;
  font-size: 12px;
  font-weight: 200;
}
.lefA {
  width: 50px;
  height: 54px;
  display: block;
  margin: 0 auto;
  padding: 17px 0;
  text-decoration: none;
  color: rgb(7, 17, 27);
}
.titles {
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  color: rgb(147, 153, 159);
  background-color: #f3f5f7;
  border-left: 3px solid #d9dde1;
  padding-left: 14px;
}
ol {
  width: 100%;
  height: 100%;
  overflow: auto;
}
img {
  width: 50px;
  height: 50px;
  margin: 18px;
}
.rightTab {
  height: 100%;
  /* overflow: auto; */
}
.rightTab > li {
  height: 90px;
  display: flex;
  background: #fff;
  border-bottom: 1px solid gray;
  position: relative;
}
.rightTab > li > div {
  width: 200px;
  margin-top: 18px;
}
.smallTitle {
  font-size: 14px;
  color: rgb(7, 17, 27);
  line-height: 14px;
}
.spCount,
.spRate {
  font-size: 10px;
  color: rgb(147, 153, 159);
  line-height: 19px;
  margin-right: 12px;
}
.spPrice {
  font-size: 14px;
  color: red;
  font-weight: 700;
  line-height: 24px;
  margin-right: 12px;
}
.spOld {
  font-size: 14px;
  color: rgb(147, 153, 159);
  font-weight: 700;
  line-height: 24px;
  text-decoration: line-through;
}
.rightTab > li > div > div {
  display: flex;
}
</style>
